.contactItem-container {
    padding: 0;
    margin-bottom: 15px;
}

.contactItem-container-Notes {
    position: relative;
    margin-top: 20px;
    padding-top: 10px;
    margin-bottom: 10px;

    &::before {
        content: "";
        position: absolute;
        height: 1px;
        top: -10px;
        left: 0px;
        right: 0px;
        background: rgba($border, .3);
    }
}

.contactItem-row {
    position: relative;
    overflow: visible;
    display: flex;
    width: 100%;
    margin-bottom: 2px;
}


/* reset inputs */
.contactItem-row input,
.contactItem-row textarea {
    outline: 0;
    border-radius: $border-radius
}

.contactItem-row input { height: 36px }

.contactItem-sortable-wrapper {
    display: flex;
    flex-grow: 1;
    border: 2px dashed transparent;
    border-radius: $border-radius;
    cursor: default;
}

.contactItem-sortable-wrapper.sortable {
    cursor: move;
}

.contactItem-label {
    position: relative;
    display: flex;
    align-items: flex-start;
    max-width: 40%;

    > input {
        position: relative;
        opacity: 0.8;
        color: $secondary;
        background: transparent;
        box-shadow: none;
        cursor: default;
        margin: 0;
        padding: 0 30px;
        border: 0;

        & ~ i.itemIcon,
        & ~ i.fa-chevron-down,
        & ~ i.fa-chevron-up {
            position: absolute;
            line-height: 36px;
        }

        & ~ i.itemIcon {
            left: 10px;
            width: 16px;
            text-align: center;
        }

        & ~ i.fa-chevron-down,
        & ~ i.fa-chevron-up {
            right: 10px;
            font-size: 0.6rem;
            opacity: 0.8;
            display: none;
        }

        &.contactItem-label-selectable { cursor: pointer }
        &.contactItem-label-selectable ~ i.fa-chevron-down,
        &.contactItem-label-selectable ~ i.fa-chevron-up { display: block }

        &.contactItem-label-editable {
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: $border-radius;

            &:hover,
            &:focus { border-color: $border }
            &:focus { cursor: text }
        }

    }
} /* contactItem-label */

.contactItem-label-selectable  ~ i.itemIcon,
.contactItem-label-selectable  ~ i.fa-chevron-down,
.contactItem-label-selectable  ~ i.fa-chevron-up { cursor: pointer; }

.contactItem-selectType {
    position: absolute;
    left: 0;
    right: 0;
    top: 35px;
    z-index: 10;
    list-style: none;
    padding: 0px 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    background: #FFF;
    border-radius: $border-radius;
    max-height: 160px;
    overflow: auto;

    li {
        display: block;

        &.selected { font-weight: bold }

        a {
            color: $secondary;
            display: block;
            padding: 8px 30px;
            text-decoration: none;
            cursor: pointer;

            &:hover { background: $light }
        }
    }
}

.contactItem-aside {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    margin-left: 8px;
}

.contactItem-itemEdit {
    display: flex;
    flex: 1;
    flex-wrap: nowrap
}

.contactItem-inputs {
    display: flex;
    flex: 1 1 auto;
}

.contactItem-inputs .pm_toggle {
    transform-origin: left center;
    margin-top: 2px;
}

contact-pgp contact-item ul.contactItem-container {
    margin: 0;
}

.contactItem-inputs .pm_select {
    width: 100%;
    position: relative;
    display: block;
    box-shadow: inset 0 0 0 1px $border, 0 1px 2px rgba(0,0,0,.1);
    border-radius: 2px;

    select::-ms-expand {
        display: none;
    }
    select {
        margin: 0;
        height: 35px;
        line-height: 35px;
        padding-left: 10px;
        position: relative;
        z-index: 3;
        background: transparent;
        border: none;
        width: 100%;
        max-width: 100%;
        min-width: 3rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        &[disabled] {
            background: rgba(0,0,0,0);
        }
    }
    .fa {
        position: absolute;
        right: 0;
        display: block;
        text-align: center;
        top: 0;
        bottom: 0;
        height: 35px;
        line-height: 35px;
        z-index: 1;
        width: 2rem;
        color: $text;
    }
}

.contactItem-inputs .publickey-info {
    display: flex;
    flex-grow: 1;
    width: 200px;
    background: #e3e4f2;
    word-break: normal;
    padding-left: 35px;

    code {
        flex-grow: 1;
        background: none;
        line-height: 36px;
        word-break: normal;
        overflow: hidden;
        width: 180px;
        display: block;
        text-overflow: ellipsis;
    }
    + i {
        position: absolute;
        margin-left: 15px;
        line-height: 36px;
        // we need the on hover tooltip while reordering
        pointer-events: all;
    }
}

.contactItem-inputs.no-key-publickey-actions {
    button:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    button:not(:last-child) {
        flex-grow: 1;
    }
    button + button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
        flex-grow: 1;
    }
}




.contactItem-inputs .customCheckbox-container {
    width: initial;
}

.fa-margin-top {
    margin-top: 0.5em;
}

.fa-top {
    top: -1em;
}

.contact-split {
    margin: 0; width: 33%; display: inline-block;
}

.appConfigBody-is-mobile .contact-split{
    margin-left: 0;
    width: 100%;
    display: inline-block;
}

.contactItem-inputs input:not([type=checkbox]),
.contactItem-inputs textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #fafafa;
    border-radius: 2px;
    border: 1px solid $border;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
    color: $text;
    flex-grow: 1;
    font-size: 1em;
    height: 35px;
    line-height: 32px;
    padding: 0 10px;
    resize: auto;
    width: 0; /* in order to make them strech correctly with flexbox */

    &:focus {
        color: $black;
        border-color: $primary;
    }
}

.contactItem-inputs input.publickey-input-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.contactItem-inputs input.contactItem-input-with-icon {
    padding-right: 50px;
    width: 0;
}

.contactItem-inputs textarea {
    font: inherit;
    min-width: 100%;
    flex: 1 0 auto;
    min-height: 65px;
    /* autoExpand */
    padding: 8px 25px 8px 10px;
    line-height: 20px;
    transition: height 0.1s ease;
    resize: none;
}


.contactAddressInput-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.contactAddressInput-container > * {
    margin-bottom: 2px
}

.contactItem-actions {
    position: relative;
    display: flex;
    min-width: 65px;
}

.contactItem-container-Photos .contactItem-actions {
    display: none;
}

// When changing the order, don't show the action buttons.
.contactItem-container:not(.as-sortable-disabled) .contactItem-actions {
    display: none;
}

.contactItem-delete {
    height: 36px;
    cursor: pointer;
    color: $primary;
    background: transparent;
    border: 0;

    &:hover {
        opacity: 1;
        color: $red;
    }
}

.contactItem-container .copy-button,
.contactItem-compose,
.contactItem-container .contactItem-btn-settings {
    position: absolute;
    left: -30px;
    top: 10px;
}
.contactItem-container .copy-button {
    left: -35px;
}


.contactItem-compose {
    top: 1px;
    margin-left: -27px;
    height: 33px;
    background: #FFF;
    color: $primary;
    border: 0;
    box-shadow:  -10px 0px 20px -5px #FFF;
}

.contactItem-container .contactItem-btn-settings {
    top: 50%;
    left: -40px;
    transform: translateY(-50%);
}

.pm_modal .contactItem-row .advancedSettingsBtn-container {
    left: -30px;
}

.contactItem-compose:hover { color: $secondary }

.contactItem-AddLabel,
.contactItem-add-inline,
.contactItem-AddLabelIcon {
    height: 36px;
    line-height: 36px;
}
.contactItem-AddLabelIcon {
    margin-left: 5px;
}
.contactItem-AddLabelText {
    margin-left: .4rem;
    color: $secondary;
    opacity: .8;
}

.contactItem-add-inline {
    text-transform: uppercase;
    font-size: 0.8rem;
    cursor: pointer;
    & > i { margin-right: 5px }
}

.contactItem-actions > button:not(.pm_button) {
    background: transparent;
    border: 0;
    padding: 0;
    color: $primary;
    margin-left: 5px;
    &:hover { color: $secondary }
}

.contactItem-add { display: none }
.contact-item-info {
    margin-top: 10px;
    margin-left: 10px;
}

.contactItem-add,
.contactItem-delete,
.contactItem-download {
    height: 36px;
    padding: 5px;
    text-align: center;
}

.contactItem-add:before,
.contactItem-delete:before {
    display: block;
    width: 17px;
    height: 17px;
    content: "";
    background: url(assets('img/plus.svg')) no-repeat center;
}

.upload-helper {
    display: none;
}


.contactItem-inputs input.fingerprint {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    box-shadow: none;
}

.contactItem-inputs input.fingerprint:focus {
    border-color: $border;
}

.contactItem-inputs input.fingerprint:not(:placeholder-shown) {
    color: gray;
    font-family: monospace;
    font-size: small;
}

.contactItem-inputs .publickey-input-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.contactItem-delete:before { background: url(assets('img/minus.svg')) no-repeat center;}

.contactItem-row .as-sortable-item-handle::before { display: none }

.contactItem-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    padding: 0 65px;
}

.contactItem-toggle-sort {
    background: transparent;
    border: 0;
    text-decoration: underline;
    color: $primary;
}

.contactItem-toggle-sort > [class^='contactItem-toggle-'] {
    display: none;
    pointer-events: none;
}

/* Context */

/* Hide compose button in modal */
.pm_modal .contactItem-compose { display: none }

.pm_modal .contact-details-only { display: none; }
.contact-add-only { display: none; }
.pm_modal .contact-add-only { display: block; }

.contactItem-container .contactItem-row:last-of-type .contactItem-add { display: block; } /* flex created an issue on IE/EDGE */

.contactItem-container:not(.as-sortable-disabled) .contactItem-toggle-sort .contactItem-toggle-sort-save,
.contactItem-container.as-sortable-disabled .contactItem-toggle-sort .contactItem-toggle-sort-enable { display: block }


.contactItem-container:not(.as-sortable-disabled) .contactItem-row input {
    border-color: transparent;
    background: transparent;
}

.contactItem-container:not(.as-sortable-disabled) .contactItem-row .fa-chevron-down,
.contactItem-container:not(.as-sortable-disabled) .contactItem-row .fa-chevron-up,
.contactItem-container:not(.as-sortable-disabled) .contactItem-row .contactItem-add,
.contactItem-container:not(.as-sortable-disabled) .contactItem-row .contactItem-delete,
.contactItem-container:not(.as-sortable-disabled) .contactItem-row .contactItem-download,
.contactItem-container:not(.as-sortable-disabled) .contactItem-row .fa-warning,
.contactItem-container:not(.as-sortable-disabled) .contactItem-row .contactItem-compose,
.contactItem-container:not(.as-sortable-disabled) .contactItem-row .fa-gear {
    display: none;
}

.contactItem-container:not(.as-sortable-disabled) .contactItem-row .contactItem-sortable-wrapper {
     border-color: rgba(0,0,0,.2);
     cursor: move;

 }
.contactItem-container:not(.as-sortable-disabled) .contactItem-row .contactItem-sortable-wrapper:hover {
    border-color: $primary-light;
    box-shadow: 0px 0px 4px $primary-light;
}
.contactItem-container:not(.as-sortable-disabled) .contactItem-row .contactItem-sortable-wrapper > * { pointer-events: none }

.contactItem-container .contactItem-row:not(:first-of-type) .itemIcon { visibility: hidden }

.contactDetails-container .as-sortable-placeholder {
    border-radius: $border-radius;
    margin-bottom: 2px;
    background: $primary-light
}


/* Validation */

.contactItem-validation,
.contactItem-itemEdit {
    min-width: 100%;
    border-left: 1px solid transparent; /* fix WTF for IE11 */
}

.contactItem-validation p {
    margin: 0;
    font-size: .8em;
    padding: .5em;
}

.contact-encryption-modal .modal-dialog {
    width: 45rem;
    margin-left: -20rem;
    margin-top: 4rem;
    margin-bottom: 0;

    .contactItem-container {
        margin-bottom: 10px;
        margin-top: 10px;
    }
}

.contact-encryption-modal {
    z-index: 99999;
}

// to prevent bubbling
.contact-email-dropdown div {
    pointer-events: none
}


/* responsive */

.appConfigBody-is-mobile .contactItem-sortable-wrapper { flex-direction: column }
.appConfigBody-is-mobile .contactItem-actions { width: auto }
.appConfigBody-is-mobile .contactItem-label { max-width: 100% }
.appConfigBody-is-mobile .contactItem-label > input { width: 100% }
.appConfigBody-is-mobile .contactItem-container .contactItem-row:not(:first-child) .contactItem-label > input { padding-left: 10px }
